<template>
  <div>
    <el-dialog
      title="产品review"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      class="mt-dialog"
      width="600px"
      @close="close"
    >
      <h2>{{ domain }}</h2>
      <el-form :model="temp" label-position="left" label-width="90px">
        <el-form-item label="站点ID" class="mt-form-item-right">
          <el-input v-model="temp.website_id" type="number" />
        </el-form-item>
        <el-form-item label="产品ID" class="mt-form-item-right">
          <el-input v-model="temp.product_id" />
        </el-form-item>
        <el-form-item label="review" class="mt-form-item-right">
          <el-input v-model="temp.review" type="textarea" :rows="3" />
        </el-form-item>

        <el-form-item label="随机作者" class="mt-form-item-right">
          <el-switch
            v-model="temp.random_reviewer"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
        <el-form-item v-if="!temp.random_reviewer" label="review" class="mt-form-item-right">
          <el-input v-model="temp.reviewer" />
        </el-form-item>

        <el-form-item label="ratings" class="mt-form-item-right">
          <el-rate v-model="temp.rating" />
        </el-form-item>

        <el-form-item label="随机时间" class="mt-form-item-right">
          <el-switch
            v-model="temp.random_date"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
        <el-form-item v-if="!temp.random_date" label="review" class="mt-form-item-right">
          <el-input v-model="temp.date_created" />
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Post } from '@/api/orders/websitereviews'

export default {
  name: 'Websitereviews',
  props: ['isVisible', 'product_id', 'website_id', 'domain'],
  data() {
    return {
      action: null,
      dialogVisible: false,
      title: '',
      loading: false,
      temp: {
        product_id: '',
        website_id: '',
        review: '',
        reviewer: '',
        rating: 5,
        random_reviewer: true,
        random_date: true,
        date_created: ''
      }
    }
  },
  watch: {
    isVisible(v) {
      this.dialogVisible = v
    },
    website_id(v) {
      if (v) {
        this.temp.website_id = v
      }
    },
    product_id(v) {
      if (v) {
        this.temp.product_id = this.product_id
      }
    }
  },
  methods: {
    resetTemp() {
      this.temp = {
        product_id: '',
        website_id: '',
        review: '',
        reviewer: '',
        rating: 5,
        random_reviewer: true,
        random_date: true,
        date_created: ''
      }
    },
    confirm() {
      this.loading = true
      Post(this.temp
      ).then(response => {
        this.temp.review = ''
        this.$message('添加成功')
        this.loading = false
      }).catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    close() {
      this.$emit('close', false)
    }
  }
}
</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .top >>> .el-select .el-input {
    width: 350px;
  }

  .top >>> .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .top {
    padding-left: 20px;
    margin-bottom: 30px;
    margin-top: 28px;
  }

  .input-with-select {
    width: calc(100% - 200px);
  }

  .add-btn {
    float: right;
    margin-right: 20px;
    width: 150px
  }

  .mt-pagination {
    float: right;
    margin-top: 5px;
  }

  .app-container >>> .el-dialog {
    margin-top: 48px !important;
    margin-bottom: 68px;
  }

  .mt-dialog >>> .el-transfer-panel {
    width: calc(50% - 60px);
  }

  .mt-form >>> .el-select {
    width: 100%;
  }

  .mt-form >>> .el-input__inner {
    width: 100%;
  }

  .mt-dialog >>> .el-dialog {
    margin-top: 60px;
    /*margin: 168px auto !important;*/
  }

  .mt-dialog >>> .el-dialog__body {
    padding-bottom: 100px;
  }
</style>
